<template>
	<view class="uni-indexed">
		<scroll-view :scroll-into-view="scrollViewId" :style="{ height: winHeight + 'px' }" class="uni-indexed__list" scroll-y>
			<block v-for="(list, idx) in lists" :key="idx">
				<view v-if="list.items && list.items.length > 0" :id="'uni-indexed-list-' + list.key" class="uni-indexed__list-title">{{ list.key }}</view>
				<view v-if="list.items && list.items.length > 0" class="uni-list">
					<view v-for="(item, index) in list.items" :key="index" class="uni-list-item" hover-class="uni-list-item--hover">
						<view class="uni-list-item__container" @click="onClick(idx, index)">
							<view v-if="showSelect" style="margin-right: 20upx;">
								<uni-icon :type="item.checked ? 'checkbox-filled' : 'circle'" :color="item.checked ? '#007aff' : '#aaa'" size="24" />
							</view>
							<view class="uni-list-item__ioc"><image :src="item.avatar" mode="aspectFill"></image></view>
							<view class="uni-list-item__content">{{ item.name }}</view>
						</view>
					</view>
				</view>
			</block>
		</scroll-view>
		<view
			:class="touchmove ? 'active' : ''"
			:style="{ height: winHeight + 'px' }"
			class="uni-indexed__menu"
			@touchstart="touchStart"
			@touchmove.stop.prevent="touchMove"
			@touchend="touchEnd"
		>
			<text
				v-for="(list, key) in lists"
				:key="key"
				:class="touchmoveIndex == key ? 'active' : ''"
				:style="{ height: itemHeight + 'px', lineHeight: itemHeight + 'px' }"
				class="uni-indexed__menu-item"
			>
				{{ list.key }}
			</text>
		</view>
		<view v-if="touchmove" class="uni-indexed--alert">{{ lists[touchmoveIndex].key }}</view>
	</view>
</template>
<script>
import uniIcon from '../uni-icon/uni-icon.vue';
export default {
	name: 'UniIndexedList',
	components: {
		uniIcon
	},
	props: {
		options: {
			type: Array,
			default() {
				return [];
			}
		},
		showSelect: {
			type: Boolean,
			default: false
		}
	},
	watch: {
		options: {
			handler: function() {
				this.setList();
			},
			deep: true
		}
	},
	created() {
		this.setList();
	},
	data() {
		return {
			lists: [],
			touchmove: false,
			touchmoveIndex: -1,
			itemHeight: 0,
			winHeight: 0,
			scrollViewId: ''
		};
	},
	methods: {
		setList() {
			this.lists = [];
			let winHeight = uni.getSystemInfoSync().windowHeight;
			this.itemHeight = winHeight / this.options.length;
			this.winHeight = winHeight;

			// if (!this.showSelect) {
			// 	this.lists = this.options;
			// 	return;
			// }
			console.log(this.options.length);
			this.lists = this.options.map(value => {
				console.log(value);
				let items = value.data.map(item => {
					let obj = {};
					// for (let key in item) {
					obj['key'] = value.letter;
					obj['name'] = item.name;
					obj['avatar'] = item.avatar;
					obj['id'] = item.id;
					obj.checked = item.checked ? item.checked : false;
					return obj;
				});
				return {
					title: value.letter,
					key: value.letter,
					items: items
				};
			});
		},
		touchStart(e) {
			this.touchmove = true;
			let pageY = e.touches[0].pageY;
			let index = Math.floor(pageY / this.itemHeight);
			let item = this.lists[index];
			if (item) {
				this.scrollViewId = 'uni-indexed-list-' + item.key;
				this.touchmoveIndex = index;
			}
		},
		touchMove(e) {
			let pageY = e.touches[0].pageY;
			let index = Math.floor(pageY / this.itemHeight);
			let item = this.lists[index];
			if (item) {
				this.scrollViewId = 'uni-indexed-list-' + item.key;
				this.touchmoveIndex = index;
			}
		},
		touchEnd() {
			this.touchmove = false;
			this.touchmoveIndex = -1;
		},
		onClick(idx, index) {
			let obj = {};
			for (let key in this.lists[idx].items[index]) {
				obj[key] = this.lists[idx].items[index][key];
			}
			let select = [];
			if (this.showSelect) {
				this.lists[idx].items[index].checked = !this.lists[idx].items[index].checked;
				this.lists.forEach((value, idx) => {
					value.items.forEach((item, index) => {
						if (item.checked) {
							let obj = {};
							for (let key in this.lists[idx].items[index]) {
								obj[key] = this.lists[idx].items[index][key];
							}
							select.push(obj);
						}
					});
				});
			}
			this.$emit('click', {
				item: obj,
				select: select
			});
		}
	}
};
</script>
<style>
@charset "UTF-8";

.uni-list {
	background-color: #fff;
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
}

.uni-list::after {
	position: absolute;
	z-index: 10;
	right: 0;
	bottom: 0;
	left: 0;
	height: 1px;
	content: '';
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
	background-color: #c8c7cc;
}

.uni-list::before {
	position: absolute;
	z-index: 10;
	right: 0;
	top: 0;
	left: 0;
	height: 1px;
	content: '';
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
	background-color: #c8c7cc;
}

.uni-list-item {
	font-size: 32upx;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

.uni-list-item__container {
	padding: 24upx 30upx;
	width: 100%;
	box-sizing: border-box;
	flex: 1;
	position: relative;
	display: flex;
	flex-direction: row;
	/* justify-content: space-between; */
	align-items: center;
}
.uni-list-item__ioc {
	height: 60upx;
	margin-right: 20upx;
}
.uni-list-item__ioc image {
	width: 60upx;
	height: 60upx;
	border-radius: 50%;
}

.uni-list-item__container:after {
	position: absolute;
	z-index: 3;
	right: 0;
	bottom: 0;
	left: 30upx;
	height: 1px;
	content: '';
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
	background-color: #c8c7cc;
}

.uni-indexed {
	display: flex;
	flex-direction: row;
}

.uni-indexed__list {
	flex: 1;
	height: 100vh;
}

.uni-indexed__list-title {
	padding: 10upx 24upx;
	line-height: 1.5;
	background-color: #f7f7f7;
	font-size: 24upx;
}

.uni-indexed__menu {
	width: 46upx;
	height: 100vh;
	background-color: #d3d3d3;
	display: flex;
	flex-direction: column;
}

.uni-indexed__menu.active {
	background-color: #c8c8c8;
}

.uni-indexed__menu.active .uni-indexed__menu-item {
	color: #333;
}

.uni-indexed__menu.active .uni-indexed__menu-item.active {
	color: #007aff;
}

.uni-indexed__menu-item {
	color: #aaa;
	font-size: 22upx;
	text-align: center;
}

.uni-indexed--alert {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 20;
	width: 160upx;
	height: 160upx;
	left: 50%;
	top: 50%;
	margin-left: -80upx;
	margin-top: -80upx;
	border-radius: 80upx;
	text-align: center;
	font-size: 70upx;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.5);
}
</style>
